
<template>
<div style="width: 430px;height: 932px;">
  <van-nav-bar
    title=""
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <van-tabs v-model="active">
    <van-tab title="进行中">
      <van-list>
        <van-cell v-for="(item, index) in reserList" :key="index" v-show="item.status==1">
          <p>预约内容：{{item.yynr}}</p>
          <p>预约时间：{{item.yytime}}</p>
          <p>预约地点：{{item.yydd}}</p>
          <p>预约描述：{{item.ddms}}</p>
          <p><van-button @click="toquxiao(item.id)">取消预约</van-button><van-button @click="toXQ(item.id)">查看详情</van-button></p>
        </van-cell>
      </van-list>
    </van-tab>
    <van-tab title="已完成">
      <van-list>
        <van-cell v-for="(item, index) in reserList" :key="index" v-show="item.status==2">
          <p>预约内容：{{item.yynr}}</p>
          <p>预约时间：{{item.yytime}}</p>
          <p>预约地点：{{item.yydd}}</p>
          <p>预约描述：{{item.ddms}}</p>
          <p><van-button @click="toquxiao(item.id)">取消预约</van-button><van-button @click="toXQ(item.id)">查看详情</van-button></p>
        </van-cell>
      </van-list>
    </van-tab>
  </van-tabs>
</div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      active:0,
      reserList:[],
      reserId:0,
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    toquxiao(id){
      axios.post("/reservation/deleteReservation?id="+id).then(res=>{
        this.$toast.success('取消成功');
        this.findreservation();
      })
    },
    toXQ(id){
      this.reserId = id;
      this.$router.push({
        path: '/repairdetails',
        query: {
          id: this.reserId
        }
      })
      localStorage.setItem("reserId",this.reserId)
    },
    findreservation(){
      axios.post("/reservation/findreservation").then(res=>{
        this.reserList = res.data.data.list;
      })
    }
  },
  created() {
    this.findreservation();
  }
}
</script>

<style scoped>

</style>
